<template>
    <div class="app-jiankong">
        <!--主机监控信息-->
        
        <el-row :gutter="20" style="margin: 20px 10px;">
        	<el-col :span="8">
        		<el-card shadow="never">
        			  <span>CPU</span>
				      	<appPie 
				      		ref="cpuPie"
				      		:options="cpuVRingSetting"
				      		></appPie>
				      		
				    </el-card>
        	</el-col>
        	<el-col :span="8">
        		<el-card shadow="never">
        			  <span>内存</span>
				      	<appPie 
				      		ref="ncPie"
				      		:options="ncVRingSetting"
				      		></appPie>
				      		
				    </el-card>
        	</el-col>
        	<el-col :span="8">
        		<el-card shadow="never">
        			  <span>磁盘</span>
				      	<appPie 
				      		ref="cpPie"
				      		:options="cpVRingSetting"
				      		></appPie>
				      		
				    </el-card>
        	</el-col>
        </el-row>
        
        
        <el-row style="margin: 20px 20px;">
        	<el-col :span="24" class="wl">
        		<label>网络&nbsp;</label>
        		
        		<wangluoSelect 
        			:autoSelect="true"
        			ref="wangluoSelect"
        			@change="wlChange" 
        			:ip="ip"></wangluoSelect>
        		
        		<shijianSelect
        			defaultValue="24h"
        			:autoSelect="true"
        			@change="sjChange"></shijianSelect>
        		
        	</el-col>
        </el-row>
        
        <el-row style="margin: 20px 20px;">
        	<el-col :span="24" class="">
        		
        		<el-card shadow="never">
		      	
		      		<appLine ref="wlLine"></appLine>
		      		
		    		</el-card>
        		
        	</el-col>
        </el-row>
        
				<!-- <el-row>
					<el-col :span="14">
						<el-row>
							<el-col :span="7" :offset="1">
								<el-card shadow="never">
									<appPie 
				      		ref="cpuPie"
				      		:options="cpuVRingSetting"
				      		></appPie>
								</el-card>
							</el-col>
							<el-col :span="7" :offset="1">
								<el-card shadow="never">
									<appPie 
										ref="ncPie"
										:options="ncVRingSetting"
										></appPie>
								</el-card>
							</el-col>
							<el-col :span="7" :offset="1">
								<el-card shadow="never">
									<appPie 
										ref="cpPie"
										:options="cpVRingSetting"
										></appPie>
								</el-card>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="8" :offset="1">
		      		<appLine ref="wlLine"></appLine>
					</el-col>
				</el-row> -->
        
    </div>
</template>


<script>
import appPie from "@/view/components/vcharts/pie";
import appLine from "@/view/components/vcharts/line";
import wangluoSelect from "@/view/components/select/wangluoSelect";
import shijianSelect from "@/view/components/select/shijianSelect";
import { getDashboardInfo, getNetByEtho } from "@/service/swagger/DashboardController";


export default {
	components: {
		appPie,
		appLine,
		wangluoSelect,
		shijianSelect,
	},
	props: {

	},
	data() {
		return {
			ip : this.$route.query.ip || "",
			// cpu
			cpuVRingSetting: {
				title: {
					text: "CPU"
				},
				extend: {
					tooltip: {
						trigger: 'item',
						formatter: 'cpu <br/>{b}'
					},
				}
			},
			// 内存
			ncVRingSetting: {
				title: {
					text: "内存"
				},
				extend: {
					tooltip: {
						trigger: 'item',
						formatter: '内存 <br/>{b}({d}%)'
					},
				}
			},
			// 磁盘
			cpVRingSetting: {
				title: {
					text: "磁盘"
				},
				extend: {
					tooltip: {
						trigger: 'item',
						formatter: '磁盘 <br/>{b}({d}%)'
					},
				}
			},

			wlParams: {
				ethoName: "",
				dateParam: "",
			}
		}
	},
	mounted() {
		
		if(this.ip){
			this.initPies();
			this.initWl()
		}
	},
	methods: {
		initPies(ip) {
			if(!ip &&! this.ip){
				return ;
			}
			if(ip){
				this.ip = ip;
			}
			getDashboardInfo({
				ip: ip || this.ip ,
			}).then(ret => {
				// init cpu
				this.$refs.cpuPie.init({
					columns: ['name', 'value'],
					rows: ret.cpuRow ,
				});
				// init 内存
				this.$refs.ncPie.init({
					columns: ['name', 'value'],
					rows: ret.ncRow,
				});
				// init 磁盘
				this.$refs.cpPie.init({
					columns: ['name', 'value'],
					rows: ret.cpRow,
				});
			})
			
			return this ;
		},
		initWl(ip){
			if(ip){
				this.ip = ip;
			}
			this.$refs.wangluoSelect.getData(this.ip)
		},
		wlChange(name, value) {
			console.log(4555,name, value)
			// 网络切换
			this.wlParams.ethoName = value;
			this.initLine();
		},
		sjChange(name, value) {
			// 时间切换
			this.wlParams.dateParam = value;
			this.initLine();
		},

		initLine(ip) {
			if(!ip &&! this.ip){
				return ;
			}
			let params = {
				...this.wlParams,
				ip: this.ip,
			}
			if (!params.ethoName) {
				delete params.ethoName;
			}
			if (!params.dateParam) {
				delete params.dateParam;
			}
			getNetByEtho(params).then(ret => {
				let dw = ""
				let data = [];
				if (ret && ret.data) {
					data = ret.data.map(el => ({
						"date": el['date'],
						"接收量": el.bytesRecv ? parseFloat(el.bytesRecv).toFixed(2) : "无",
						"发送量": el.bytesSent ? parseFloat(el.bytesSent).toFixed(2) : "无",
					}))
					dw = ret.data[0] && ret.data[0].bytesRecv ? ret.data[0].bytesRecv.match(/[a-zA-Z]$/)[0] : "";
				}
				this.$refs.wlLine.init({
					dw: dw,
					columns: ['date', '接收量', '发送量'],
					rows: data
				});
			})
		}
	}
}

</script>


<style scoped lang="scss">
@import "../../../../styles/variables.scss";

.app-jiankong {
  .wl {
    div {
      display: inline-block;
    }
  }
}
</style>